<template>
  <div>
    <van-cell-group inset class="L-margin-top-20" v-if="Object.keys(headinfo).length>0">
      <div class="L-margin-20">
        <van-row type="flex" align="center">
          <van-col span="1">&nbsp;</van-col>
          <van-col span="22">
            <template v-for="(item,key,index) in headinfo" :key="index">
              
              <div v-if="index===0" class="L-big-text"  v-html="item"></div>
              <!-- <div v-if="index===1" class="L-small-text L-secondary-text-color " v-html="item"></div> -->
            </template>
          </van-col>
          <van-col span="1">&nbsp;</van-col>
        </van-row>

        <van-row type="flex" align="center" v-if="hastag==1">
          <van-col span="1">&nbsp;</van-col>
          <van-col span="22">
            <span v-for="(item,index) in tags" :key="index"  :class="item.tagclass">{{item.sname}}</span>
            <van-tag @click="handleAddTag" color="#fbf1ec" text-color="#f57746" size="medium" round > + 新增</van-tag>
          </van-col>
          <van-col span="1">&nbsp;</van-col>
        </van-row>
      </div>

      <template v-for="(item,key,index) in headinfo" :key="index">
        <van-cell v-if="index>0" :title="key" :value="item">
          <template #value>
            <span v-html="item"></span>
          </template>
        </van-cell>
      </template>
    </van-cell-group>
  </div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, ref, defineEmits } from "vue";

const props = defineProps({
  showTagPopup: {
    type: Boolean,
    default: false,
  },
  headinfo: {
    type: Object,
    default: {},
  },
  hastag: {
    type: Number,
    default: 0,
  },
  handleAddTag: {
    type: Function,
    default: () => {},
  },
  tags: {
    type: Array,
    default: [],
  },

});
function handleAddTag() {
  props.handleAddTag();
}
</script>


<style scoped>
</style>